<template>
  <div class="page hidden flex flex-col f16">
    <div
      ref="header"
      class="header p10 flex flex-between border-box align-center"
    >
      <div>标题</div>
      <div class="flex flex-center">
        <el-button @click="goBigScreen" type="primary" class="mr20">进入大屏</el-button>
        <el-image style="width: 30px; height: 30px" :src="src" fit="cover" />
        <el-button type="primary" class="ml20 mr20" size="small" @click="Quit">退出</el-button>
      </div>
    </div>
    <!-- 主题部分 -->
    <div class="body flex1 flex" :style="'height:' + height + 'px'">
      <!-- 左侧菜单栏 -->
      <div class="aside">
        <el-menu>
          <el-menu-item v-for="(item, index) in menus" :key="index">
            <el-icon><component :is="hashMenu[item].icon"></component></el-icon>
            <router-link :to="'/' + item">{{
              hashMenu[item].text
            }}</router-link>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 右侧内容部分 -->
      <div class="content flex1">
        <router-view></router-view>
      </div>
    </div>
    <!-- 大屏部分 -->
    <el-drawer v-model="drawer" direction="ttb">
      <kdlayout :layout="layout">
        <template #kdtitle>
          <bigScreenTitle></bigScreenTitle>
        </template>
        <template #kdweather>
          <kdweather :options="weatherData"> </kdweather>
        </template>
        <template #cascade>
        <cascade1></cascade1>
        </template>
      </kdlayout>
    </el-drawer>
  </div>
</template>

<script setup>

import { ref, reactive, onMounted,watch,computed } from "vue";
import config from "./config.js";
import bigScreenTitle from "@/components/title/title.vue";
import kdweather from '@/components/kdweather/kdweather.vue'
import cascade1 from '@/components/cascade1/cascade1.vue'
import { getCurrentPlantingPlanListByParkId } from "../../utils/api";
import { $getSensorCount, $getCount, $getWeather,$getPhoto,$getCropVarieties} from '@/utils/api.js';
import router from "../../router/router.js";
import {formatgetSensorData} from "@/utils/index.js";
import { method } from "lodash";


const src = ref("");
const height = ref(0);
const drawer = ref(true);
const layout = reactive(config);

//初始值weatherData
const weatherData = reactive({
  degree:0,
  humidity:0,
  wind_direction:0,
  wind_power:0,
})
//获取设备数量
//用法：写一个函数通过async await的方式来直接拿结果，去给某一项赋值
const getSensor = async () => {
  const res = await $getSensorCount()
  console.log(res);
  config.layoutArr[0].options.data = formatgetSensorData (res.results.split(''));
};
  getSensor();


  //获取传感器数量
  const getSensorCount = async ()=>{
    const res = await  $getCount();
    layout.layoutArr[1].options.data = formatgetSensorData (res.results.split(''));
    console.log(res);
  }
  getSensorCount();

// 获取天气
(async function () {
  const Weather = await $getWeather();
  // console.log(Weather)
  weatherData.degree = Weather.data.observe.degree;
  weatherData.humidity = Weather.data.observe.humidity;
  weatherData.wind_direction = Weather.data.observe.wind_direction;
  weatherData.wind_power = Weather.data.observe.wind_power;
  console.log(Weather)
})();

const header = ref(null);
// 0增加 1删除 2修改 3查看
const btnPermission = ref([
  {
    type: {
      btnRole: [0, 2, 3],
    },
  },
  {
    type: {
      btnRole: [3],
    },
  },
  {
    type: {
      btnRole: [0, 2],
    },
  },
  {
    type: {
      btnRole: [1],
    },
  },
]);
const btnRoles = JSON.parse(localStorage.getItem("roles"));
const menuData = btnRoles.find((item) => item.name === "index");
const menuName = menuData.children.map((item) => item.name);
console.log('menuName',menuName);
const hashMenu = reactive({
  historyplan: { icon: "setting", text: "历史计划" },
  account: { icon: "document", text: "账户信息" },
  facilities: { icon: "location", text: "设施大屏" },
});
const menus = ref(menuName);

//退出到登录
const Quit = () =>{
localStorage.removeItem('userinfo');
  router.push("/login")
};

//获取轮播图数据
const getPhoto = async () =>{
  const res = await $getPhoto()
  // . 的方式是调用，调用这对象的某个属性   [] 的方式是添加
  layout.layoutArr[5].options.swiperArr = res.results.map(item=>{
    return{
      swiperSlideName:"kdimage",
          options:{ 
           imgUrl:item,
          },
        };
  }); 
  }
  getPhoto();

  const getCropVarieties = async () =>{
    const res = await $getCropVarieties({
      tenant_id:"389767",
      park_id:'1414435101940515302'
    })
    console.log(3,res)
  }
  getCropVarieties()
onMounted(async () => {
  src.value = JSON.parse(localStorage.getItem("userinfo")).avatar;
  height.value = window.innerHeight - header.value.clientHeight;
  const res = await getKdBarData();

  // console.log(config.layoutArr[0].options)
  config.layoutArr[0].options.options = res;
  Object.assign(layout, config);
  console.log(111, layout);
});

const getKdBarData = async () => {
  const res = await getCurrentPlantingPlanListByParkId({
    park_id: "1414435101940515302",
    tenant_id: "389767",
  });
  const xAxisData = res.results.map((item) => item?.name || "");
  const yAxisData = res.results.map((item) => Number(item?.model_id || ""));
  const options = {
    xAxis: {
      type: "category",
      data: xAxisData,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: yAxisData,
        type: "line",
      },
    ],
  };
  return options;
};
</script>

<style lang="scss" scoped>
  @import "../../scss/index.scss";
.page {
  @include size(100vw, 100vh);
  .header {
    height: 40px;
    flex-shrink: 0;
    background-color: red;
  }
  .aside {
    width: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: aqua;
  }
}
:deep(.el-drawer) {
  height: 100% !important;
   background: url(@/assets/imgs/bg8.png) no-repeat center/100% 100%;
}
</style>
